<div class="unit-course">
  <div class="title">单元上课历程</div>
  <div class="day-wrap">
    <p class="day"><span class="big">23</span>天</p>
    <p class="text">持续时间</p>
  </div>
  <div class="chart">
    <div class="text">
      <div class="A">A</div>
      <div class="B">B</div>
      <div class="C">C</div>
    </div>
    <div class="line">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
    </div>
    <div id="L" class="L"></div>
    <script type="text/javascript">
      $(function(){
        var scoreHtml = '', scoreList = [1, 2, 10, 7, 5, 0, 8, 9, 4, 3];
        $.each(scoreList, function (index, score) {
          scoreHtml +=  '<div class="L' + (index+1) + '">' +
            '<div class="score-item' + (score===0?' empty':'') + '">' +
            '<div class="' + (score<5?'gray':'blue') + '" style="height: ' + ((score>1?score:0)*10) + '%;">' +
            '<p class="score">' + scoreToText(score) + '</p>' +
            '</div>' +
            '</div>' +
            '<div class="item-text' + (score===0?' empty':'') + '">L' + (index+1) + '</div>' +
            '</div>';
        });
        $('#L').append(scoreHtml);

        function scoreToText (score) {
          switch (score) {
            case 1: return '';
            case 2: return 'C<span>-</span>';
            case 3: return 'C';
            case 4: return 'C<span>+</span>';
            case 5: return 'B<span>-</span>';
            case 6: return 'B';
            case 7: return 'B<span>+</span>';
            case 8: return 'A<span>-</span>';
            case 9: return 'A';
            case 10: return 'A<span>+</span>';
            default: return '';
          }
        }
      });
    </script>
  </div>
</div>